<template>
    <div class="face-login-container">
        <span style="font-weight: 800;font-size: 40px;color: rgba(24,24,24,0.85)">人脸登录</span><router-link to="/login" style="color: rgba(0,0,0,0.5)">返回密码登录</router-link
    >
        <video ref="video" width="640" height="480" autoplay playsinline style="border-radius: 30px"></video>
        <canvas ref="canvas" width="640" height="480" style="display: none;"></canvas>
        <el-button @click="upFaceImg" type="primary" size="mini">&nbsp;&nbsp;登录</el-button>
    </div>
</template>

<script>
    export default {
        name: "FaceLogin",
        data(){
            return{
                login: {
                    password: "",
                    username:'',
                },
            }
        },
        mounted() {
            this.startCamera();
        },
        methods: {
            startCamera() {
                const video = this.$refs.video;
                if (navigator.mediaDevices.getUserMedia) {
                    navigator.mediaDevices
                        .getUserMedia({ video: true })
                        .then((stream) => {
                            video.srcObject = stream;
                        })
                        .catch((error) => {
                            console.error("无法访问摄像头:", error);
                        });
                }
            },
            upFaceImg() {
                const video = this.$refs.video;
                const canvas = this.$refs.canvas;
                const ctx = canvas.getContext("2d");
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                // 将 canvas 内容转换为 Blob 对象
                canvas.toBlob((blob) => {
                    const formData = new FormData();
                    formData.append("image", blob, "face_image.jpg");

                    // 发送文件到后端
                    fetch("http://127.0.0.1:5000/face_identify", {
                        method: "POST",
                        body: formData
                    })
                        .then((response) => response.json())
                        .then((data) => {
                            console.log(data);
                            if (data.name==='UnKnow'){
                                this.$message.warning("沒有此人")
                            }else{
                                this.login.username=data.name;
                                this.login.password="11223344";
                                sessionStorage.setItem("username_important",data.name);
                            }
                        })
                        .catch((error) => {
                            console.error(error);
                        });
                }, "image/jpeg");
            },
        },
    };
</script>

<style scoped>
    .face-login-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: rgba(176,196,222, 1);
    }

    h1 {
        margin-bottom: 20px;
        color: #333;
    }

    video {
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }

    button {
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
    }

    button:hover {
        background-color: #0056b3;
    }
</style>
